﻿@model WeddingEventManagementApp.Models.Event_VM

@{
    ViewBag.Title = "Add a New Event";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="twelve columns">
    <h3>New Event</h3>
    @using (Html.BeginForm())
    {
        <div>
            @Html.ValidationSummary(true, "There has been an error processing your request", new { @class = "no-bullet alert-box alert" })
        </div>
        <div class="row">
            <fieldset>
                <legend>Event Details</legend>

                <div class="row">
                    <div class="two columns">
                        <label class="right inline">Client:</label>
                    </div>

                    <div class="six columns">
                        <div class="row">
                            <div class="twelve columns">
                                @Html.TextBoxFor(model => model.ClientID, new { @class = "cmbx" })
                            </div>
                        </div>
                    </div>

                    <div class="four columns">
                        @Html.ValidationMessageFor(model => model.ClientID)
                    </div>
                </div>

                <div class="row">
                    <div class="two columns">
                        <label class="right inline">Title:</label>
                    </div>

                    <div class="six columns">
                        <div class="row">
                            <div class="twelve columns">
                                @Html.EditorFor(model => model.Title)
                            </div>
                        </div>
                    </div>

                    <div class="four columns">
                        @Html.ValidationMessageFor(model => model.Title)
                    </div>
                </div>

                <div class="row">
                    <div class="two columns">
                        <label class="right inline">Event Type:</label>
                    </div>
                    <div class="six columns">
                        <div class="row">
                            <div class="twelve columns">
                                @Html.TextBoxFor(model => model.EventType, new { @class = "ddl-type" })
                            </div>
                        </div>
                    </div>
                    <div class="four columns">
                        @Html.ValidationMessageFor(model => model.EventType)
                    </div>
                </div>

                            <!-- Start Date -->
            <div class="row">
                <div class="two columns">
                    <label class="right inline">Start Date: </label>
                </div>
                <div class="six columns">
                    <div class="row">
                        <div class="six columns">
                            @Html.TextBoxFor(model => model.StartDate, new { @class = "datepicker" })
                        </div>
                        <div class="six columns">
                            @Html.TextBoxFor(model => model.StartTime, new { @class = "timepicker" })
                        </div>
                    </div>
                </div>
                <div class="four columns">
                    @Html.ValidationMessageFor(model => model.StartDate)
                </div>
            </div>

            <!-- End Date -->
            <div class="row">
                <div class="two columns">
                    <label class="right inline">End Date:</label>
                </div>
                <div class="six columns">
                    <div class="row">
                        <div class="six columns">
                            @Html.TextBoxFor(model => model.EndDate, new { @class = "datepicker" })
                        </div>
                        <div class="six columns">
                            @Html.TextBoxFor(model => model.EndTime, new { @class = "timepicker" })
                        </div>
                    </div>
                </div>
                <div class="four columns">
                    @Html.ValidationMessageFor(model => model.EndDate)
                </div>
            </div>

            <!-- Guests -->
            <div class="row">
                <div class="two columns">
                    <label class="right inline">Guests (Estimate):</label>
                </div>
                <div class="six columns">
                    <div class="row">
                        <div class="six columns">
                            @Html.TextBoxFor(model => model.Guests, new { type = "number" })
                        </div>
                    </div>
                </div>
                <div class="four columns">
                    @Html.ValidationMessageFor(model => model.EndDate)
                </div>
            </div>

        </fieldset>
        <fieldset>
            <legend>Services</legend>

            <div class="row">

                <!-- Flowers -->
                <div class="three columns" style="margin-bottom: 20px;">
                    <label class="service-panel" for="@Html.NameFor(m => m.Flowers)">
                        <h4>Flowers</h4>
                        @Html.CheckBoxFor(m => m.Flowers)
                        <i class="icon-flowers" style="font-size: 95px;"></i>
                    </label>
                    <div class="extra-service-option">
                        <h5>Budget</h5>
                        <div style="position: relative;">
                            <span class="moneySpan">$</span> 
                            @Html.TextBoxFor(m => m.FlowerBudget, new { @class="moneyInput number" })
                        </div>
                    </div>
                </div>

                <!-- Decor -->
                <div class="three columns" style="margin-bottom: 20px;">
                    <label class="service-panel" for="@Html.NameFor(m => m.Decor)">
                        <h4>Decor</h4>
                        @Html.CheckBoxFor(m => m.Decor)
                        <i class="icon-decor" style="font-size: 115px; line-height: 90px;"></i>
                    </label>
                    <div class="extra-service-option">
                        <h5>Budget</h5>
                        <div style="position: relative;">
                            <span class="moneySpan">$</span> 
                            @Html.TextBoxFor(m => m.DecorBudget, new { @class="moneyInput number"})
                        </div>
                    </div>
                </div>

                <!-- Coordination -->
                <div class="three columns" style="margin-bottom: 20px;">
                    <label class="service-panel" for="@Html.NameFor(m => m.Coordination)">
                        <h4>Coordination</h4>
                        @Html.CheckBoxFor(m => m.Coordination)
                        <i class="icon-handshake" style="font-size: 55px; line-height: 75px;"></i>
                    </label>
                    <div class="extra-service-option">
                        <h5>Package</h5>
                        @Html.TextBoxFor(model => model.PackageType, new { @class = "ddl-packages" })
                    </div>
                </div>

                <div class="three columns" style="margin-bottom: 20px;">
                </div>
            </div>

            </fieldset>
            <fieldset>
                <legend>Confirm and Save</legend>
                <div class="row">
                    <div class="twelve columns">
                        @Html.LabelFor(m => m.Notes)
                        @Html.TextAreaFor(m => m.Notes)
                    </div>
                </div>
            </fieldset>
        </div>
    }
</div>

<!-- Modals -->
<div id="mdlClient" class="reveal-modal">
    <a class="close-reveal-modal">&#215;</a>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/Scripts/formToWizard.js")
    <script>
        $(document).ready(function () {
            $("#body form").formToWizard();

            $('.service-panel > input[type=checkbox]').change(function () {
                $(this).parent().toggleClass("selected");
                $(this).parent().siblings('.extra-service-option').slideToggle();
            });

            $('form input').change(function () {
                var name = $(this).attr('name');

                if ($("#" + name + "-val").length > 0) {
                    var val = $(this).val();
                    
                    $("#" + name + "-val").text(val);
                }
            });
               
            $(".ddl-type").kendoDropDownList({
                dataTextField: "Name",
                dataValueField: "ID",
                dataSource: new kendo.data.DataSource({
                    transport: {
                        read: "/Event/GetAllEventTypesJson" // url to server method which returns data
                    }
                })
            });

            $(".ddl-packages").kendoDropDownList({
                dataTextField: "Name",
                dataValueField: "ID",
                dataSource: new kendo.data.DataSource({
                    transport: {
                        read: "/Event/GetPackagesJson" // url to server method which returns data
                    }
                })
            });

            //Client
            $(".cmbx").kendoComboBox({
                dataTextField: "FullName",
                dataValueField: "ID",
                dataSource: new kendo.data.DataSource({
                    transport: {
                        read: "/Client/GetAllJson" // url to server method which returns data
                    }
                })
            });

            //Date and time pickers
            $(".timepicker").kendoTimePicker({});


            function startChange() {
                var startDate = start.value();
                
                if (startDate) {
                    startDate = new Date(startDate);

                    if (end.value() < startDate) {
                        end.value(startDate);
                    }

                    end.min(startDate);
                }
            }

            function endChange() {
                var endDate = end.value();

                if (endDate) {
                    endDate = new Date(endDate);
                    endDate.setDate(endDate.getDate() - 1);
                }
            }

            var start = $("#StartDate").kendoDatePicker({
                change: startChange
            }).data("kendoDatePicker");

            var end = $("#EndDate").kendoDatePicker({
                change: endChange
            }).data("kendoDatePicker");

            var startTime = $("#StartTime").kendoTimePicker({
                change: startTimeChange
            }).data("kendoTimePicker");

            var endTime = $("#EndTime").kendoTimePicker().data("kendoTimePicker");

            end.min(start.value());

        });
    </script>
}
